<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            height: 5000px;
        }
    </style>
</head>

<body>

</body>
<script>
    // 元素节点的内置属性:
    // clientWidth   clientHeight (元素的可视宽高 )
    // scrollWidth   scrollHeight  实际宽高
    // scrollLeft    scrollTop     滚动条在元素中的位置
    // offsetLeft    offsetTop     元素的偏移(参照物父元素)


    // 事件:
    // 页面
    // 鼠标
    // 键盘
    // 表单


    // 移动端: 触摸
    // ontouchstart  当按下手指时
    // ontouchmove   手指在屏幕上移动
    // ontouchned    手指在屏幕上松开
    // ontouchcancel  触摸取消

    // 事件对象
    // var e = e || window.event;

    // 事件对象的属性:
    // 通用:
    // timeStamp  
    // type
    // target   事件源(触发事件的元素 -> 给父元素绑定事件,子(代)元素也会触发)
    // path     从事件源开始,所有父元素的集合

    // ctrlKey  altKey  shiftKey  metaKey


    // 鼠标相关
    // clientX   clientY     x  y
    // pageX     pageY
    // offsetX   offsetY










    document.ontouchstart = function (e) {
        var e = e || window.event;
        console.log("开始触摸", e);
    }
    document.ontouchcancel = function () {
        console.log("触摸取消");
    }

    document.ontouchmove = function () {
        console.log("触摸移动ing");
    }
    document.ontouchend = function () {
        console.log("触摸结束");
    }







</script>

</html>